<template>
    <div class="login"  :style="{backgroundImage:info&&info.homeBackground?'url('+info.homeBackground+')':''}">
        <div class="forgot-content">
            <h3>忘记密码</h3>
            <div class="botton-form">
                <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" v-if="!isScuess">
                    <el-form-item prop="phone">
                        <el-input v-model="loginForm.phone" type="text" auto-complete="off" placeholder="手机号" :maxlength="11">
                            <svg-icon slot="prefix" icon-class="people" class="el-input__icon input-icon" />
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="code">
                        <el-input
                                v-model="loginForm.code"
                                type="password"
                                auto-complete="off"
                                placeholder="验证码"
                                style="width: calc(100% - 118px)"
                                @keyup.enter.native="handleSetPassword"
                        >
                            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                        </el-input>
                        <div class="login-code">
                            <verification-button :phone="loginForm.phone"></verification-button>
                        </div>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input
                                v-model="loginForm.password"
                                type="password"
                                auto-complete="off"
                                placeholder="密码格式为由大写字母开头，大小写字母、数字、特殊字符中的至少3种组成8~30位的字符串"
                                style="width:100%"
                                @keyup.enter.native="handleSetPassword"
                        >
                            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password2">
                        <el-input
                                v-model="loginForm.password2"
                                type="password"
                                auto-complete="off"
                                placeholder="确认密码"
                                style="width:100%"
                                @keyup.enter.native="handleSetPassword"
                        >
                            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" style="width: 100%" @click="handleSetPassword">提交</el-button>
                    </el-form-item>
                </el-form>
                <div  class="login-form" v-else>
                    <div style="text-align: center">
                        <i class="el-icon-check" style="font-size: 80px; color: green"></i>
                        <div style="line-height: 40px; color: grey">重置密码成功</div>
                    </div>

                    <el-button type="primary" size="mini" style="width: 100%" @click="toLogin">返回登陆</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import VerificationButton from "./VerificationButton";
    import eventBus from "../../utils/eventBus";
    import api from "@/api/index"
    import store from '../../store'
    import theme from '@/utils/theme.js'
    export default {
        components: {VerificationButton},
        data(){
            const equalToPassword = (rule, value, callback) => {
                if (this.loginForm.password !== value) {
                    callback(new Error("两次输入的密码不一致"));
                } else {
                    callback();
                }
            };
            return {
                isScuess:false,
                loginForm:{
                    phone:undefined,
                    code:undefined,
                    password :undefined,
                    password2 :undefined,
                },
                loginRules:{
                    phone: [
                        {required: true, message: "手机不能为空", trigger: "blur"}
                    ],
                    code: [
                        {required: true, message: "验证码不能为空", trigger: "blur"}
                    ],
                    password: [
                        {pattern:/^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^(0-9a-zA-Z)]).{8,32}$/, message: "密码必须包含字母，数字，特殊字符", trigger: "blur"},
                        {required: true, message: "密码不能为空", trigger: "blur"}
                    ],
                    password2: [
                        { required: true, message: "确认密码不能为空", trigger: "blur" },
                        { required: true, validator: equalToPassword, trigger: "blur" }
                    ],
                },
              info:{}
            }
        },
      created() {
        this.getSiteInfo()
      },
      computed:{
            codeUrl(){
                return `${process.env.VUE_APP_BASE_API}/api/accounts/image_codes/${this.loginForm.uuid}.jpg`
            },
        },
        methods:{
            toLogin(){
              this.$router.push({path:"/loginTwo"})
            },
            getCode() {
                this.generateUUID()
            },
            generateUUID() {
                let d = new Date().getTime();
                if (window.performance && typeof window.performance.now === "function") {
                    d += performance.now(); //use high-precision timer if available
                }
                let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                    let r = (d + Math.random() * 16) % 16 | 0;
                    d = Math.floor(d / 16);
                    return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
                });
                this.loginForm.uuid = uuid;
            },
            handleSetPassword(){
                this.$refs["loginForm"].validate(valid => {
                    if (valid) {
                        api.accountsUsersRestPwd(this.loginForm).then(res=>{
                            this.msgSuccess(res.msg)
                            this.isScuess = true
                        })
                    }
                });
            },
          getSiteInfo() {
            store.dispatch('baseSettings/getSiteInfo').then(res=>{
              this.info = res
              theme.renderingTheme(this.info.theme)
            })
          }
        }
    }

</script>
<style rel="stylesheet/scss" lang="scss">
    .login {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background-size: cover;
        .forgot-content{
            width: 1000px;
            background: white;
            border-radius: 10px;
            height: 500px;
            h3{
                text-align: center;
                line-height: 60px;
                font-weight: 600;
            }
            .botton-form{
                display: flex;
                justify-content: center;
                .login-form{
                    width: 60%;
                    margin: 20px 10px;
                }
                .login-code {
                    width: 112px;
                    height: 38px;
                    float: right;
                    img {
                        cursor: pointer;
                        vertical-align: middle;
                    }
                }
            }
        }
    }

</style>
